<template>
  <div>
    <div class="userManageContainer" style="display: flex; flex-direction: column;">
      <div class="userManage">
        <h2>管理用户信息</h2>
      </div>

      <!--搜索用户-->
      <div class="box4">
        <el-form :inline="true" :model="search_user" class="demo-form-inline">
          <el-form-item label="用户名" style=" margin-top: 5px">
            <el-select v-model="search_user.username" placeholder="负责人/测试项目经理">
              <el-option label="小王" value="小王"></el-option>
              <el-option label="小李" value="小李"></el-option>
              <el-option label="小赵" value="小赵"></el-option>
            </el-select>
            <!--<el-input v-model="search_pro.charger" placeholder="负责人/测试项目经理"></el-input>-->
          </el-form-item>
          <el-form-item label="用户角色" style="margin-left: 20px;  margin-top: 5px">
            <el-select v-model="search_user.role" placeholder="用户角色">
              <el-option label="测试项目经理" value="测试项目经理"></el-option>
              <el-option label="认证工程师" value="认证工程师"></el-option>
              <el-option label="审批人员" value="审批人员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 20px;  margin-top: 5px">
            <el-button type="primary" @click="selectByUsernameCharger">筛选</el-button>
            <el-button type="info" plain @click="drawBack">重置</el-button>
          </el-form-item>

        </el-form>
      </div>

      <!--用户信息展示-->
      <div class="box5">
        <el-table class="table_pro" :data="userInfo" border stripe height="450"
                  :header-cell-style="{ backgroundColor:'aliceblue ', color:'#666' }">
          <el-table-column
              type="selection"
              width="55"
              align="center">
          </el-table-column>
          <el-table-column prop="id" label="用户ID"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="email" label="邮件"></el-table-column>
          <el-table-column prop="role" label="用户角色"></el-table-column>
          <!--<el-table-column prop="avatar" label="备注"></el-table-column>-->
          <el-table-column
              fixed="right"
              label="操作"
              width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delUserInfo(scope.row)">删除用户</el-button>
              <el-button type="text" size="small" @click="editUserInfo(scope.row)">修改角色</el-button>
            </template>
          </el-table-column>

        </el-table>

        <!--删除选中数据-->
        <!--弹出对话框-->
        <el-dialog title="确认删除该用户？" :visible.sync="deleteFormVisible" style="width: 100%">

          <div slot="footer" class="dialog-footer-2">
            <el-button @click="deleteFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteConfirm">确 定</el-button>
          </div>

        </el-dialog>


        <!--编辑用户信息-->
        <!--弹出对话框-->
        <el-dialog title="编辑用户信息" :visible.sync="userInfoFormVisible" style="width: 100%">
          <el-form :model="userOne" :rules="rulesUserInfo" ref="ruleUserInfoForm" label-width="100px"
                   class="demo-ruleForm">

            <el-form-item label="用户ID" prop="id" :disabled="true">
              <el-input v-model="userOne.id" style="width: 500px" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username" :disabled="true">
              <el-input v-model="userOne.username" style="width: 500px" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="名字" prop="name" :disabled="true">
              <el-input v-model="userOne.name" style="width: 500px" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone" :disabled="true">
              <el-input v-model="userOne.phone" style="width: 500px" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userOne.email" style="width: 500px" :disabled="true"></el-input>

            </el-form-item>

            <el-form-item label="用户角色" prop="role">
              <el-select v-model="userOne.role" placeholder="请选择用户角色">
                <el-option label="认证工程师" value="认证工程师"></el-option>
                <el-option label="测试项目经理" value="测试项目经理"></el-option>
                <el-option label="审批人员" value="审批人员"></el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <div slot="footer" class="dialog-footer-1">
            <el-button @click="userInfoFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUserInfo">确 定</el-button>
          </div>

        </el-dialog>

      </div>


    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "UserManage",

  data() {
    return {
      search_user: { //搜索的用户信息条件
        username: '',
        role: '',
      },

      userInfo: [], //用户数据

      userOne : { },//要删除的用户数据，单个，默认为空

      deleteFormVisible : false, //删除用户信息——对话框的可见性，默认不可见

      userInfoFormVisible : false, //编辑用户信息——对话框的可见性，默认不可见


      //弹出的对话框的用户信息——单个用户
      rulesUserInfo:{
        id : [
          {required: true, message: '不可更改', trigger: 'change'}
        ],
        username: [
          {required: true, message: '不可更改', trigger: 'change'}
        ],
        name: [
          {required: false, message: '可以更改', trigger: 'change'}
        ],
        phone : [
          {required: false, message: '可以更改', trigger: 'change'}
        ],
        email : [
          {required: false, message: '可以更改', trigger: 'change'}
        ],
        role : [
          {required: true, message: '请选择用户角色', trigger: 'blur'}
        ]
      },

    }

  },

  methods: {
    //通过用户名和角色，筛选用户信息
    selectByUsernameCharger() {
      if((this.search_user.username === '') && (this.search_user.role === '')){
        this.$message.error("用户名和用户角色为空！")
      }else{
        this.$message.success("筛选成功！")

        let searchUser = this.search_user
        request.get('/user/selectByUsernameRole', {
          params: { //传入参数
            username: searchUser.username,
            role: searchUser.role,
          }
        }).then(res => {
          this.userInfo = res.data
          if(this.userInfo.length === 0){
            this.$message.error("当前无用户！")
          }
        }).catch(error => {
          console.error('Error:', error);
        });
      }

    },

    //取消筛选
    drawBack() {
      //清空筛选条件
      this.search_user.username = ''
      this.search_user.role = ''

      //更新用户数据——全部
      request.get('/user/selectAll').then(res => {
        this.userInfo = res.data
      }).catch(error => {
        console.error('Error:', error);
      });

      this.$message.success("重置成功！")
    },

    //删除用户
    delUserInfo(row){
      //获取当前行用户信息
      //拿到当前行数据——然后删除

      if( JSON.parse(localStorage.getItem("token")).username === 'admin' ){
        this.userOne = JSON.parse(JSON.stringify(row))
        //弹出对话框
        this.deleteFormVisible = true
      }else {
        this.$message.error("您无权限操作！")
      }


    },

    //删除用户确认——弹出对话框
    deleteConfirm(){
      //发送到后端 '/user/delByUserInfo', {params: this.userOne}
      this.$request({
            url: '/user/delByUserInfo',
            method: 'POST',
            data: this.userOne,
          }
      ).then(res => {
        //通过
        if (res.code === '200') {
          //更新数据
          this.userInfo = res.data
          this.$message.success('删除用户成功！')
          this.deleteFormVisible = false //关闭对话框
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    editUserInfo(row){ //点击编辑用户信息

      if( JSON.parse(localStorage.getItem("token")).username === 'admin' ){
        //拿到当前行数据
        this.userOne = JSON.parse(JSON.stringify(row))
        //弹出对话框
        this.userInfoFormVisible = true
      }else {
        this.$message.error("您无权限操作！")
      }

    },

    saveUserInfo(){ //对话框——保存编辑
      //验证输入合法性
      this.$refs.ruleUserInfoForm.validate((valid) => {
        if (valid) {
          //验证通过
          //发送到后端 '/user/updateByUserInfo', {params: this.userOne}
          this.$request({
                url: '/user/updateByUserInfo',
                method: 'POST',
                data: this.userOne,
              }
          ).then(res => {
            //发送数据
            if (res.code === '200') {
              //更新数据
              this.userInfo = res.data
              this.$message.success('更新数据成功！')
              this.userInfoFormVisible = false //关闭对话框
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请完善表单相关信息！');
        }
      });
    },
  },

  mounted() {
    this.$message.info("只有管理员有权限操作本界面 !")
    request.get('/user/selectAll').then(res => {
      this.userInfo = res.data
    }).catch(error => {
      console.error('Error:', error);
    });
  }
}
</script>

<style scoped>

.userManage{
  height: 70%;
  background-color: #cccccc; /* 仅用于视觉效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 5px;
}


</style>